<template>
  <el-card>
    <!--  -->
    <el-form label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="title"
                      placeholder="根据文章标题搜索"
                      size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="状态">
            <el-select v-model="state"
                       placeholder="请选择"
                       size="small"
                       style="width: 35%">
              <el-option label="启用"
                         :value="1" />
              <el-option label="禁用"
                         :value="0" />

            </el-select>
            <el-button type=""
                       style="margin-left: 10px"
                       size="small">取 消</el-button>
            <el-button type="primary"
                       style="background-color: #409eff; color:#fff"
                       size="small">搜 索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="success"
                       icon="el-icon-edit"
                       size="small"
                       style="background: #67c23a; color: #fff"
                       @click="addArticle = true">新增技巧</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />
    <el-table :data="tableData">
      <el-table-column label="序号"
                       type="index" />
      <el-table-column label="文章标题"
                       width="400px"
                       prop="title" />
      <el-table-column label="阅读数"
                       prop="visits" />
      <el-table-column label="录入人"
                       prop="username" />
      <el-table-column label="录入时间"
                       prop="createTime" />
      <el-table-column label="状态">
        <template #default="{row}">
          {{ row.state === 1 ? '已禁用' : '已启用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="180px">
        <template #default="{row}">
          <el-button type="text"
                     @click="handleOpenPre(row.id)">预览</el-button>
          <el-button type="text"
                     @click="handleDisable(row)"> {{ row.state !== 1 ? '禁用' : '启用' }}</el-button>
          <el-button type="text"
                     :disabled="row.state!==1"
                     @click="handleOpenEdit(row.id)">修改</el-button>
          <el-button type="text"
                     :disabled="row.state!==1"
                     @click="handleDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :current-page="query.page"
                     :page-sizes="[2, 3, 8, 10]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>

    <!-- 新增文章 -->
    <el-dialog title="新增文章"
               :visible="addArticle"
               @close="handleAddClose">
      <el-form ref="formDataRef"
               label-width="100px"
               :rules="rules"
               :model="formData">
        <el-form-item label="文章标题"
                      prop="title">
          <el-input v-model="formData.title"
                    placeholder="请输入文章标签题" />
        </el-form-item>
        <el-form-item label="文章内容">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="formData.articleBody" />
        </el-form-item>
        <el-form-item label="解析视频">
          <el-input v-model="formData.videoURL"
                    placeholder="请输入视频地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small"
                   @click="handleAddClose">取 消</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color: #409eff; color:#fff"
                   @click="handleAddArticle">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 预览文章 -->
    <el-dialog title="预览文章"
               :visible="previewShow"
               @close="handlePreviewClose">
      <div class="title">
        <h2>{{ perViewObj.title }}</h2>
        <span>{{ perViewObj.createTime }}</span>
        <span> {{ perViewObj.creatorID===2 ? '超级管理员' : '编辑组' }}</span>
        <span>
          <i class="el-icon-view" />
          <span>
            {{ perViewObj.visits }}
          </span>
        </span>
      </div>
      <div class="body">
        <div v-html="perViewObj.articleBody" />
      </div>

    </el-dialog>
    <!-- 修改文章 -->
    <el-dialog title="修改文章"
               :visible="EditArticle"
               @close="handleEditClose">
      <el-form ref="formDataRef"
               label-width="100px"
               :rules="rules"
               :model="formData">
        <el-form-item label="文章标题"
                      prop="title">
          <el-input v-model="formData.title"
                    placeholder="请输入文章标签题" />
        </el-form-item>
        <el-form-item label="文章内容">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="formData.articleBody" />
        </el-form-item>
        <el-form-item label="解析视频">
          <el-input v-model="formData.videoURL"
                    placeholder="请输入视频地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small"
                   @click="handleEditClose">取 消</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color: #409eff; color:#fff"
                   @click="handleEditArticle">确 定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>

import { getArticleAPI, addArticleAPI, delArticleAPI, getArticleDetailAPI, setArticleStateAPI, putArticleAPI } from '@/api/articles'
import dayjs from 'dayjs'
export default {
  name: 'ArticlesView',
  data () {
    return {
      // 列表数据
      tableData: [],
      total: 0,
      // 搜索用的
      title: '',
      // 搜索用的
      state: '',
      // 控制现新增弹窗显示
      addArticle: false,
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 校验规则
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      // 控制预览弹窗显示
      previewShow: false,
      // 预览数据
      perViewObj: {},
      // 控制修改显示
      EditArticle: false,
      query: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    // 获取面试技巧列表
    async getArticleList () {
      const res = await getArticleAPI(this.query)
      // console.log(res)
      this.tableData = res.items
      this.tableData.forEach(item => {
        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD')
      })
      this.total = res.counts
    },
    // 关闭新增弹窗
    handleAddClose () {
      this.addArticle = false
      this.$refs.formDataRef.resetFields()
    },
    // 新增文章
    async handleAddArticle () {
      await addArticleAPI(this.formData)
      this.handleAddClose()
      this.getArticleList()
      this.$message.success('添加成功')
    },
    // 删除文章
    async handleDel (id) {
      try {
        await this.$confirm('确定删除嘛', '提示', {
          type: 'warning'
        })
        await delArticleAPI(id)
        this.$message.success('删除成功')
        this.getArticleList()
      } catch (e) {
        this.$message.error('已取消')
      }
    },
    // 关闭预览弹窗
    handlePreviewClose () {
      this.previewShow = false
    },
    // 打开预览弹窗
    async handleOpenPre (id) {
      this.previewShow = true
      const res = await getArticleDetailAPI(id)
      console.log(res)
      this.perViewObj = res
      this.perViewObj.createTime = dayjs(this.perViewObj.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    // 处理文章状态
    async handleDisable (row) {
      if (row.state) {
        await setArticleStateAPI(row.id, 0)
        this.getArticleList()
      } else {
        await setArticleStateAPI(row.id, 1)
        this.getArticleList()
      }
    },
    // 关闭修改
    handleEditClose () {
      this.EditArticle = false
    },
    // 打开修改文章
    async handleOpenEdit (id) {
      this.EditId = id
      this.EditArticle = true
      const res = await getArticleDetailAPI(id)
      // console.log(res)
      this.formData = res
    },
    // 修改文章
    async handleEditArticle () {
      await putArticleAPI(this.EditId, this.formData)
      this.handleEditClose()
      this.getArticleList()
      this.$message.success('修改成功')
    },
    // 页面条数发生变化时
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getArticleList()
    },
    // 页码发生变化时
    handleCurrentChange (val) {
      this.query.page = val
      this.getArticleList()
    }

  }
}
</script>

<style scoped lang="scss">
.el-card {
  ::v-deep.ql-editor {
    min-height: 100px;
  }
  ::v-deep .el-dialog__body {
    padding: 0px 20px;
  }
}
.el-alert {
  margin-top: 20px;
}
h2 {
  margin: 0;
  padding: 0;
}
.title {
  span {
    display: inline-block;
    margin-right: 13px;
    padding-top: 10px;
  }
  i {
    margin-right: 5px;
  }
}
.body {
  padding-bottom: 30px;
}
.pagination {
  display: flex;
  justify-content: right;
}
</style>
